<template>
  <div class="facility-management-container">
    <!-- 地图容器 -->
    <div id="viewDiv" class="map-view"></div>

    <!-- 位置选择提示 -->
    <div class="location-selection-tip" v-if="isSelectingLocation">
      <el-alert title="请在地图上点击选择设施位置" type="warning" :closable="false" show-icon />
    </div>

    <!-- 右上角功能面板 -->
    <div class="control-panel">
      <el-card class="control-card">
        <template #header>
          <div class="card-header">
            <span>设施管理</span>
            <div class="water-drop"></div>
          </div>
        </template>
        <div class="control-buttons">
          <el-button type="primary" @click="startAddFacility" class="facility-button">
            <el-icon><Plus /></el-icon> 添加设施
          </el-button>
          <el-button
            type="warning"
            @click="startEditFacility"
            :disabled="!hasSelectedFeature"
            class="facility-button"
          >
            <el-icon><Edit /></el-icon> 编辑设施
          </el-button>
          <el-button
            type="danger"
            @click="confirmDelete"
            :disabled="!hasSelectedFeature"
            class="facility-button"
          >
            <el-icon><Delete /></el-icon> 删除设施
          </el-button>
        </div>
        <div class="operation-tip" v-if="!hasSelectedFeature && !isAddingFacility">
          <el-alert
            title="提示：点击地图选择设施进行编辑或删除，或点击添加设施按钮创建新设施"
            type="info"
            :closable="false"
            show-icon
          />
        </div>
        <div class="selected-info" v-if="hasSelectedFeature && !isEditing && !isAddingFacility">
          <el-descriptions
            title="已选择设施"
            :column="1"
            border
            size="small"
            class="facility-descriptions"
          >
            <el-descriptions-item label="名称">{{
              selectedFeature!.attributes.name || '未知'
            }}</el-descriptions-item>
            <el-descriptions-item label="地址">{{
              selectedFeature!.attributes.address || '未知'
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
    </div>

    <!-- 添加/编辑设施表单对话框 -->
    <el-dialog
      v-model="showFacilityDialog"
      :title="isAddingFacility ? '添加设施' : '编辑设施'"
      width="50%"
      destroy-on-close
    >
      <el-form :model="facilityForm" label-width="120px" ref="facilityFormRef" :rules="formRules">
        <el-form-item label="名称" prop="name">
          <el-input v-model="facilityForm.name" placeholder="请输入设施名称"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="facilityForm.address" placeholder="请输入地址"></el-input>
        </el-form-item>
        <el-form-item label="卫生间类型" prop="BathroomType">
          <el-select
            v-model="facilityForm.BathroomType"
            placeholder="请选择卫生间类型"
            style="width: 100%"
          >
            <el-option label="公共卫生间" value="公共卫生间"></el-option>
            <el-option label="商场卫生间" value="商场卫生间"></el-option>
            <el-option label="景区卫生间" value="景区卫生间"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="facilityForm.gender" placeholder="请选择性别" style="width: 100%">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
            <el-option label="中性" value="中性"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="无障碍设施">
          <el-switch
            v-model="facilityForm.is_accessible"
            active-text="有"
            inactive-text="无"
          ></el-switch>
        </el-form-item>
        <el-form-item label="是否免费">
          <el-switch v-model="facilityForm.is_free" active-text="是" inactive-text="否"></el-switch>
        </el-form-item>
        <el-form-item label="费用" v-if="!facilityForm.is_free">
          <el-input-number
            v-model="facilityForm.fee"
            :min="0"
            :precision="2"
            :step="0.5"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="开放时间">
          <el-input
            v-model="facilityForm.open_time"
            placeholder="请输入开放时间，例如：09:00-18:00"
          ></el-input>
        </el-form-item>
        <el-form-item label="开放日">
          <el-select
            v-model="facilityForm.open_days"
            multiple
            placeholder="请选择开放日"
            style="width: 100%"
          >
            <el-option label="周一" value="周一"></el-option>
            <el-option label="周二" value="周二"></el-option>
            <el-option label="周三" value="周三"></el-option>
            <el-option label="周四" value="周四"></el-option>
            <el-option label="周五" value="周五"></el-option>
            <el-option label="周六" value="周六"></el-option>
            <el-option label="周日" value="周日"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="厕位数量">
          <el-input-number v-model="facilityForm.toilet_count" :min="1" :step="1"></el-input-number>
        </el-form-item>
        <el-form-item label="维护电话" prop="MaintanceNumber">
          <el-input v-model="facilityForm.MaintanceNumber" placeholder="请输入维护电话"></el-input>
        </el-form-item>
        <el-form-item label="设施照片">
          <div class="upload-container">
            <el-upload
              class="avatar-uploader"
              :auto-upload="false"
              :show-file-list="false"
              :on-change="handlePhotoChange"
              accept="image/*"
            >
              <img v-if="facilityForm.Photo" :src="facilityForm.Photo" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            <div class="upload-tip" v-if="facilityForm.Photo">
              <el-button size="small" type="danger" @click="removePhoto">删除照片</el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="位置选择方式" v-if="isAddingFacility">
          <el-radio-group v-model="locationSelectMode">
            <el-radio label="map">地图点选</el-radio>
            <el-radio label="manual">手动输入</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="位置" v-if="isAddingFacility && locationSelectMode === 'map'">
          <div class="location-info">
            <el-tag v-if="newLocation" type="success">已选择位置</el-tag>
            <el-tag v-else type="warning">请在地图上点击选择位置</el-tag>
          </div>
        </el-form-item>
        <el-form-item
          label="经纬度"
          v-if="(newLocation && locationSelectMode === 'map') || locationSelectMode === 'manual' || isEditing"
        >
          <div class="coordinates-inputs">
            <el-input
              v-model="facilityForm.latitude"
              placeholder="纬度"
              class="coordinate-input"
              :disabled="isAddingFacility && locationSelectMode === 'map'"
              @change="handleCoordinateChange"
            >
              <template #prepend>纬度</template>
            </el-input>
            <el-input
              v-model="facilityForm.longitude"
              placeholder="经度"
              class="coordinate-input"
              :disabled="isAddingFacility && locationSelectMode === 'map'"
              @change="handleCoordinateChange"
            >
              <template #prepend>经度</template>
            </el-input>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelFacilityOperation">取消</el-button>
          <el-button
            type="primary"
            @click="saveFacility"
            :disabled="isAddingFacility && !newLocation"
          >
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog v-model="showDeleteDialog" title="确认删除" width="30%">
      <span
        >确定要删除设施 "{{ selectedFeature?.attributes.name || '未知设施' }}"
        吗？此操作不可恢复。</span
      >
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDeleteDialog = false">取消</el-button>
          <el-button type="danger" @click="deleteFacility">确认删除</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage, type FormInstance, type UploadFile } from 'element-plus'
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import Graphic from '@arcgis/core/Graphic'
import Point from '@arcgis/core/geometry/Point'
import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol'
import gaodeLayer from '@/utils/GaoDeBaseLayer'
import Query from '@arcgis/core/rest/support/Query.js'
import PictureMarkerSymbol from '@arcgis/core/symbols/PictureMarkerSymbol'
import wcIcon from '@/assets/WC.png'

// 状态变量
const showFacilityDialog = ref(false)
const showDeleteDialog = ref(false)
const isAddingFacility = ref(false)
const isSelectingLocation = ref(false) // 新增：是否正在选择位置状态
const isEditing = ref(false)
const hasSelectedFeature = ref(false) // 新增：是否已选择要素的标志
let selectedFeature: Graphic | null = null
let newLocation: Point | null = null
const facilityFormRef = ref<FormInstance | null>(null)

// 表单数据
const facilityForm = ref({
  name: '',
  address: '',
  BathroomType: '',
  gender: '',
  is_accessible: false,
  is_free: true,
  fee: 0,
  open_time: '',
  open_days: [] as string[],
  toilet_count: 1,
  reviews: '[]',
  issues: '[]',
  MaintanceNumber: '', // 维护电话字段
  Photo: '', // 照片字段，使用base64存储
  latitude: null as number | null, // 新增纬度字段
  longitude: null as number | null, // 新增经度字段
})

// 表单验证规则
const formRules = {
  name: [{ required: true, message: '请输入设施名称', trigger: 'blur' }],
  address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
  BathroomType: [{ required: true, message: '请选择卫生间类型', trigger: 'change' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  MaintanceNumber: [
    { pattern: /^\d{3,15}$/, message: '请输入有效的维护电话号码', trigger: 'blur' },
  ],
}

// 地图和图层引用
let view: MapView | null = null
let bathroomLayer: FeatureLayer | null = null
let tempGraphic: Graphic | null = null



onMounted(() => {
  initMap()
})

onUnmounted(() => {
  if (view) {
    view = null
  }
})
// 初始化地图
const initMap = () => {
  try {
    // 创建地图实例
    const map = new Map({
      basemap: {
        baseLayers: [gaodeLayer],
      },
    })

    // 创建地图视图
    view = new MapView({
      container: 'viewDiv',
      map: map,
      center: [116.3, 39.9], // 北京的经纬度
      zoom: 10,
    })

    // 创建卫生间设施要素图层
    bathroomLayer = new FeatureLayer({
      url: 'https://services.arcgis.com/Jaqp8M1tVnnHQ5RM/arcgis/rest/services/Bathroom_FacilitiesManagementSystem/FeatureServer/0',
      outFields: ['*'], // 获取所有字段
      renderer: {
        type: 'simple',
        symbol: new PictureMarkerSymbol({
          url:wcIcon,
          width: 24,
          height: 24
        }),
      },
    })

    // 添加图层到地图
    map.add(bathroomLayer)

    // 添加点击事件
    view.on('click', (event) => {
      if (isAddingFacility.value && isSelectingLocation.value) {
        // 如果正在添加设施并且在选择位置状态，记录点击位置
        newLocation = view!.toMap(event)

        // 更新表单中的经纬度
        facilityForm.value.longitude = newLocation.longitude ?? null;
        facilityForm.value.latitude = newLocation.latitude ?? null;

        // 添加临时标记
        addTempMarker(
          new Point({
            x: newLocation.x,
            y: newLocation.y,
            spatialReference: view!.spatialReference,
          }),
        )

        // 选择位置后，显示表单对话框
        isSelectingLocation.value = false
        showFacilityDialog.value = true
        return
      }
      console.log(event.mapPoint)
      // 如果不是添加模式，执行空间查询
      const query = new Query({
        geometry: event.mapPoint,
        distance: 100,
        units: 'meters',
        spatialRelationship: 'intersects',
        outFields: ['*'],
        returnGeometry: true,
      })

      // 执行查询
      bathroomLayer!
        .queryFeatures(query)
        .then((result) => {
          console.log(result)
          if (result.features.length > 0) {
            // 获取第一个匹配的要素
            selectedFeature = result.features[0]
            hasSelectedFeature.value = true // 设置已选择要素标志为true
            ElMessage.success(`已选择设施: ${selectedFeature.attributes.name || '未命名设施'}`)
          } else {
            selectedFeature = null
            hasSelectedFeature.value = false // 设置已选择要素标志为false
            ElMessage.info('未找到卫生间设施')
          }
        })
        .catch((error) => {
          console.error('查询失败:', error)
          ElMessage.error('查询设施信息失败')
        })
    })
  } catch (error) {
    console.error('初始化地图失败:', error)
    ElMessage.error('初始化地图失败')
  }
}

// 添加临时标记
const addTempMarker = (location: Point) => {
  // 移除之前的临时标记
  if (tempGraphic && view) {
    view.graphics.remove(tempGraphic)
  }

  // 创建新的临时标记
  tempGraphic = new Graphic({
    geometry: location,
    symbol: new SimpleMarkerSymbol({
      color: [226, 119, 40],
      outline: {
        color: [255, 255, 255],
        width: 2,
      },
      size: 12,
    }),
  })

  // 添加到视图
  if (view) {
    view.graphics.add(tempGraphic)
  }
}

// 开始添加设施
const startAddFacility = () => {
  isAddingFacility.value = true
  isSelectingLocation.value = locationSelectMode.value === 'map' // 只在地图选择模式时设置
  isEditing.value = false
  newLocation = null

  // 显示选择位置提示
  if (locationSelectMode.value === 'map') {
    ElMessage.info('请在地图上点击选择设施位置')
  }

  // 重置表单
  facilityForm.value = {
    name: '',
    address: '',
    BathroomType: '',
    gender: '',
    is_accessible: false,
    is_free: true,
    fee: 0,
    open_time: '',
    open_days: [],
    toilet_count: 1,
    reviews: '[]',
    issues: '[]',
    MaintanceNumber: '',
    Photo: '',
    latitude: null,
    longitude: null,
  }
}

// 开始编辑设施
const startEditFacility = () => {
  if (!selectedFeature) return

  isAddingFacility.value = false
  isEditing.value = true
  showFacilityDialog.value = true

  // 填充表单数据
  const attrs = selectedFeature.attributes
  facilityForm.value = {
    name: attrs.name || '',
    address: attrs.address || '',
    BathroomType: attrs.BathroomType || '',
    gender: attrs.gender || '',
    is_accessible: attrs.is_accessible === '有',
    is_free: attrs.is_free === '是',
    fee: attrs.fee || 0,
    open_time: attrs.open_time || '',
    open_days: attrs.open_days ? attrs.open_days.split(',') : [],
    toilet_count: attrs.toilet_count || 1,
    reviews: attrs.reviews || '[]',
    issues: attrs.issues || '[]',
    MaintanceNumber: attrs.MaintanceNumber || '',
    Photo: attrs.Photo || '',
    latitude: selectedFeature.geometry ? (selectedFeature.geometry as Point).latitude ?? null : null,
    longitude: selectedFeature.geometry ? (selectedFeature.geometry as Point).longitude ?? null : null,
  }
}

// 取消操作
const cancelFacilityOperation = () => {
  showFacilityDialog.value = false
  isAddingFacility.value = false
  isSelectingLocation.value = false // 重置选择位置状态
  isEditing.value = false

  // 清除临时标记
  if (tempGraphic && view) {
    view.graphics.remove(tempGraphic)
  }
  newLocation = null
}

// 保存设施
const saveFacility = async () => {
  if (!facilityFormRef.value) return

  try {
    await facilityFormRef.value.validate()

    if (isAddingFacility.value) {
      if (locationSelectMode.value === 'map' && !newLocation) {
        ElMessage.error('请先在地图上选择位置')
        return
      } else if (locationSelectMode.value === 'manual' &&
                (!facilityForm.value.latitude || !facilityForm.value.longitude)) {
        ElMessage.error('请输入有效的经纬度坐标')
        return
      }
    }

    // 准备属性数据 - 确保所有字段类型正确
    const attributes: any = {
      name: String(facilityForm.value.name),
      address: String(facilityForm.value.address),
      BathroomType: String(facilityForm.value.BathroomType),
      gender: String(facilityForm.value.gender),
      is_accessible: facilityForm.value.is_accessible ? '有' : '无',
      is_free: facilityForm.value.is_free ? '是' : '否',
      fee: String(facilityForm.value.is_free ? '0' : facilityForm.value.fee),
      open_time: String(facilityForm.value.open_time || ''),
      open_days: Array.isArray(facilityForm.value.open_days)
        ? facilityForm.value.open_days.join(',')
        : '',
      toilet_count: parseInt(String(facilityForm.value.toilet_count)) || 1,
      reviews: String(facilityForm.value.reviews || '[]'),
      issues: String(facilityForm.value.issues || '[]'),
      MaintanceNumber: String(facilityForm.value.MaintanceNumber || ''),
      Photo: String(facilityForm.value.Photo || ''),
      latitude: facilityForm.value.latitude !== null ? String(facilityForm.value.latitude) : '',
      longitude: facilityForm.value.longitude !== null ? String(facilityForm.value.longitude) : '',
    }

    if (isAddingFacility.value) {
      // 添加新设施
      if (!newLocation || !bathroomLayer) {
        ElMessage.error('请先在地图上选择位置')
        return
      }

      // 创建新要素
      const newFeature = new Graphic({
        geometry: newLocation,
        attributes: attributes,
      })

      try {
        // 添加到图层
        const results = await bathroomLayer.applyEdits({
          addFeatures: [newFeature],
        })

        if (results.addFeatureResults && results.addFeatureResults.length > 0) {
          ElMessage.success('添加设施成功')
          // 清除临时标记
          if (tempGraphic && view) {
            view.graphics.remove(tempGraphic)
          }
        } else {
          ElMessage.error('添加设施失败')
        }
      } catch (error) {
        console.error('添加设施时出错:', error)
      }
    } else if (isEditing.value) {
      // 编辑现有设施
      if (!selectedFeature || !bathroomLayer) {
        ElMessage.error('未选择设施')
        return
      }

      // 更新要素属性
      const updatedFeature = selectedFeature.clone()
      updatedFeature.attributes = {
        ...updatedFeature.attributes,
        ...attributes,
        OBJECTID: selectedFeature.attributes.OBJECTID, // 保留原始ID
      }

      // 应用编辑
      const results = await bathroomLayer.applyEdits({
        updateFeatures: [updatedFeature],
      })

      if (results.updateFeatureResults.length > 0) {
        ElMessage.success('更新设施成功')
        selectedFeature = updatedFeature
      } else {
        ElMessage.error('更新设施失败')
      }
    }

    // 关闭对话框
    showFacilityDialog.value = false
    isAddingFacility.value = false
    isEditing.value = false
    newLocation = null
  } catch (error) {
    console.error('保存设施失败:', error)
    ElMessage.error('表单验证失败，请检查输入')
  }
}

// 确认删除
const confirmDelete = () => {
  if (!selectedFeature) return
  showDeleteDialog.value = true
}

// 处理照片上传并转换为base64
const handlePhotoChange = (file: UploadFile) => {
  const isImage = file.raw?.type.startsWith('image/')
  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return
  }

  // 图片大小限制（2MB）
  const isLt2M = file.size! / 1024 / 1024 < 2
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过2MB!')
    return
  }

  // 压缩并转换图片为base64
  compressImage(file.raw as File, 800, 0.7)
}

// 压缩图片
const compressImage = (file: File, maxWidth: number, quality: number) => {
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = (e) => {
    const img = new Image()
    img.src = e.target?.result as string
    img.onload = () => {
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')

      // 计算压缩后的尺寸，保持宽高比
      let width = img.width
      let height = img.height
      if (width > maxWidth) {
        height = (height * maxWidth) / width
        width = maxWidth
      }

      canvas.width = width
      canvas.height = height
      ctx?.drawImage(img, 0, 0, width, height)

      // 转换为base64并设置到表单
      const base64 = canvas.toDataURL('image/jpeg', quality)
      facilityForm.value.Photo = base64
    }
  }
}

// 删除照片
const removePhoto = () => {
  facilityForm.value.Photo = ''
}

// 删除设施
const deleteFacility = async () => {
  if (!selectedFeature || !bathroomLayer) {
    ElMessage.error('未选择设施')
    return
  }

  try {
    // 执行删除
    const results = await bathroomLayer.applyEdits({
      deleteFeatures: [selectedFeature],
    })

    if (results.deleteFeatureResults.length > 0) {
      ElMessage.success('删除设施成功')
      selectedFeature = null
      hasSelectedFeature.value = false // 重置已选择要素标志
    } else {
      ElMessage.error('删除设施失败')
    }

    // 关闭对话框
    showDeleteDialog.value = false
  } catch (error) {
    console.error('删除设施失败:', error)
    ElMessage.error('删除设施失败')
  }
}

// 在 setup 中添加新的响应式变量
const locationSelectMode = ref('map') // 'map' 或 'manual'

// 添加坐标变化处理函数
const handleCoordinateChange = () => {
  if (locationSelectMode.value === 'manual' &&
      facilityForm.value.latitude !== null &&
      facilityForm.value.longitude !== null) {
    // 验证输入的经纬度是否有效
    const lat = parseFloat(String(facilityForm.value.latitude))
    const lng = parseFloat(String(facilityForm.value.longitude))

    if (isNaN(lat) || isNaN(lng) ||
        lat < -90 || lat > 90 ||
        lng < -180 || lng > 180) {
      ElMessage.error('请输入有效的经纬度坐标')
      return
    }

    // 创建新的点位置
    newLocation = new Point({
      latitude: lat,
      longitude: lng,
      spatialReference: view!.spatialReference
    })

    // 添加临时标记
    addTempMarker(newLocation)

    // 将地图中心移动到输入的位置
    view?.goTo({
      center: [lng, lat],
      zoom: 15
    })
  }
}
</script>

<style scoped>
.facility-management-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.map-view {
  width: 100%;
  height: 100%;
}

.control-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 280px; /* 更紧凑一点 */
}

.control-card {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 2px solid #1976d2;
  border-top: 6px solid #1976d2;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  color: #1976d2;
  font-weight: bold;
  font-size: 16px;
  padding: 0 5px;
}

.water-drop {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-color: #42a5f5;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(66, 165, 245, 0.5);
  animation: drip 2s infinite;
}

@keyframes drip {
  0% {
    opacity: 0.7;
    transform: translateY(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(-50%) scale(1.2);
  }
  100% {
    opacity: 0.7;
    transform: translateY(-50%) scale(1);
  }
}

.control-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0 5px;
}

.facility-button {
  position: relative;
  overflow: hidden;
  border: 1px solid; /* 添加边框 */
  font-size: 14px;
  padding: 8px 0;
  color: #fff; /* 确保文字颜色可见 */
  z-index: 1; /* 确保按钮内容在前景 */
}

/* 修复按钮背景样式 */
.facility-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s;
  z-index: -1; /* 确保在按钮内容后面 */
}

.facility-button:hover::before {
  transform: translateX(100%);
}

/* 为不同类型的按钮添加明确的背景色 */
.facility-button[type='primary'] {
  background-color: var(--el-color-primary);
}

.facility-button[type='warning'] {
  background-color: var(--el-color-warning);
}

.facility-button[type='danger'] {
  background-color: var(--el-color-danger);
}

/* 禁用状态的按钮样式 */
.facility-button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.operation-tip {
  margin: 8px 0;
  padding: 0 5px;
}

.operation-tip :deep(.el-alert) {
  border-radius: 6px;
  background-color: rgba(224, 247, 250, 0.5);
  border-left: 3px solid #42a5f5;
}

.selected-info {
  margin-top: 10px;
  padding: 0 5px;
}

.facility-descriptions {
  background-color: rgba(224, 247, 250, 0.3);
}

.facility-descriptions :deep(.el-descriptions__header) {
  margin-bottom: 8px;
  color: #1976d2;
  font-size: 14px;
  position: relative;
}

.facility-descriptions :deep(.el-descriptions__header)::after {
  content: '🚽';
  position: absolute;
  font-size: 12px;
  right: 5px;
  top: 0;
}

.facility-descriptions :deep(.el-descriptions__body) {
  background-color: rgba(255, 255, 255, 0.7);
}

.facility-descriptions :deep(.el-descriptions__label) {
  background-color: rgba(66, 165, 245, 0.1);
  font-weight: bold;
  color: #1976d2;
}

.location-info {
  display: flex;
  align-items: center;
  height: 32px;
}

.coordinates-inputs {
  display: flex;
  gap: 10px;
}

.coordinate-input {
  flex: 1;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.location-selection-tip {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 300px;
}

.location-selection-tip :deep(.el-alert) {
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #1976d2;
  border-left: 4px solid #1976d2;
}

/* 添加卫生间特色的装饰元素 */
.control-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, #42a5f5, #42a5f5 15px, #1976d2 15px, #1976d2 30px);
  z-index: 1;
}
.el-button + .el-button {
  margin-left: 0px;
}

/* 照片上传样式 */
.upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-uploader {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  width: 178px;
  height: 178px;
}

.avatar-uploader:hover {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
  object-fit: cover;
}

.upload-tip {
  margin-top: 8px;
}
</style>
